<div class="invoiceCategoryManagementDiv">
  <!-- 搜索部分 -->
  <div class="searchDiv">
    <div>
      <div class="modal-line click-order-search">
        <span class="modal-line-title">开票分类</span>
        <input type="text" #searchFor1 class="form-control inp" placeholder="输入开票分类搜索" (focus)="IsActivity = true" (blur)="IsActivity = false"
          (keyup)="getListFunc(searchFor1.value)" [(ngModel)]="invoiceActivity">
      </div>
      <div class="dropDownList modal-line click-order-search" *ngIf="IsActivity">
        <ul class="click-order-search-list click-order-search-multiList">
          <li *ngFor="let invoice of invoiceSearchList" (mousedown)="addListFunc(invoice.name)">
            <span>{{invoice.name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 按钮组 -->
  <div class="btnDiv">
    <button (click)="searchFn(searchFor1.value)">查询</button>
    <button (click)="showCreatModel()">新建</button>
    <button>
      <a href="../../../../assets/批量导入开票分类.xlsx">下载导入模板</a>
    </button>
    <button (click)="showUploadBox1()">批量导入</button>
  </div>
  <p class="tipsText">默认开票分类：
    <span>{{defaultCate}}</span>
  </p>
  <!-- 表格 -->
  <form class="tableBox" border="1">
    <table>
      <thead class="title">
        <tr>
          <td>最后更新时间</td>
          <td>开票分类</td>
          <td>纳税分类编码</td>
          <td>税率</td>
          <td>优惠政策标识</td>
          <td>零税率标识</td>
          <td>增值税特殊管理</td>
          <td (click)="onChangeTable()">操作</td>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of rows let i=index">
          <td>{{row.updatedTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
          <td>{{row.name}}</td>
          <td>{{row.taxClassification}}</td>
          <td>{{row.taxRate}}</td>
          <td>{{row.usePreferentialPolicy}}</td>
          <td>{{row.zeroTaxMark}}</td>
          <td>{{row.taxSpecialContent}}</td>
          <td>
            <a (click)="showEditModel(row.id)">编辑</a>
            <a (click)="showSetDefault(row.id)">设为默认</a>
          </td>
        </tr>
      </tbody>
    </table>
  </form>

  <!-- 分页 -->
  <pagination *ngIf="rows" class="pagination-sm" [(ngModel)]="page" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage"
    [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" [firstText]="localText.firstBtn" [lastText]="localText.lastBtn"
    [previousText]="localText.previousBtn" [nextText]="localText.nextBtn" (pageChanged)="onChangeTable($event)" (numPages)="numPages = $event">
  </pagination>
  <pre *ngIf="rows" class="card card-block card-header">页数: {{page}} / {{numPages}}</pre>
  <!-- 新建开票分类 -->

  <div id="newInvoiceBox" class="modalBoxHide">
  </div>
  <div id="newInvoiceContainer" class="modalBoxHide">
    <div class="newInvoiceTitle">新建开票分类</div>
    <div class="invoiceInfor">
      <div class="itemRow">
        <label for="invoiceCate">开票分类：</label>
        <input type="text" id="invoiceCate" class="form-control" placeholder="请输入开票分类" [(ngModel)]="creatInvoiceItem.name">
      </div>
      <div class="itemRow">
        <label for="invoiceCode">纳税分类编码：</label>
        <input type="text" id="invoiceCode" class="form-control" placeholder="纳税分类编码" [(ngModel)]="creatInvoiceItem.taxClassification">
      </div>
      <div class="itemRow">
        <label for="taxRate">税率：</label>
        <input type="text" id="taxRate" class="form-control" placeholder="0-1之间的数字,支持两位小数" [(ngModel)]="creatInvoiceItem.taxRate">
      </div>
      <div class="itemRow">
        <label for="preferSign">优惠政策标识：</label>
        <select id="preferSign" [(ngModel)]="creatInvoiceItem.usePreferentialPolicy" class="form-control">
          <option value="{{option.id}}" *ngFor="let option of PreferentialPolicyList">{{option.name}}</option>
        </select>
      </div>
      <div class="itemRow">
        <label for="zeroTaxRateSign">零税率标识：</label>
        <select id="zeroTaxRateSign" [(ngModel)]="creatInvoiceItem.zeroTaxMark" class="form-control">
          <option value="{{option.id}}" *ngFor="let option of zeroTaxMarkList">{{option.name}}</option>
        </select>
      </div>
      <div class="itemRow">
        <label for="specialManage">增值税特殊管理：</label>
        <select id="specialManage" [(ngModel)]="creatInvoiceItem.taxSpecialContent" class="form-control">
          <option value="{{option.id}}" *ngFor="let option of TaxSpecialContentList">{{option.name}}</option>
        </select>
      </div>
    </div>
    <div class="newInvoiceBtn">
      <button (click)="cancleCreat()">取消</button>
      <button (click)="creatInvoiceCate()">保存</button>
    </div>
  </div>

  <!-- 编辑开票分类 -->
  <div id="editInvoiceBox" class="modalBoxHide">
  </div>
  <div id="editInvoiceContainer" class="modalBoxHide">
    <div class="editInvoiceTitle">编辑开票分类</div>
    <div class="invoiceInfor">
      <div class="itemRow">
        <label for="editInvoiceCate">开票分类：</label>
        <input type="text" id="editInvoiceCate" class="form-control" placeholder="请输入开票分类" [(ngModel)]="editInvoiceItem.name">
      </div>
      <div class="itemRow">
        <label for="editInvoiceCode">纳税分类编码：</label>
        <input type="text" id="editInvoiceCode" class="form-control" placeholder="纳税分类编码" [(ngModel)]="editInvoiceItem.taxClassification">
      </div>
      <div class="itemRow">
        <label for="editTaxRate">税率：</label>
        <input type="text" id="editTaxRate" class="form-control" placeholder="0-1之间的数字，支持两位小数" [(ngModel)]="editInvoiceItem.taxRate">
      </div>
      <div class="itemRow">
        <label for="editPreferSign">优惠政策标识：</label>
        <select name="" id="editPreferSign" class="form-control" [(ngModel)]="editInvoiceItem.usePreferentialPolicy">
          <option value="{{option.id}}" *ngFor="let option of PreferentialPolicyList">{{option.name}}</option>
        </select>
      </div>
      <div class="itemRow">
        <label for="editZeroTaxRateSign">零税率标识：</label>
        <select name="" id="editZeroTaxRateSign" class="form-control" [(ngModel)]="editInvoiceItem.zeroTaxMark">
          <option value="{{option.id}}" *ngFor="let option of zeroTaxMarkList">{{option.name}}</option>
        </select>
      </div>
      <div class="itemRow">
        <label for="editSpecialManage">增值税特殊管理：</label>
        <select name="" id="editSpecialManage" class="form-control" [(ngModel)]="editInvoiceItem.taxSpecialContent">
          <option value="{{option.id}}" *ngFor="let option of TaxSpecialContentList">{{option.name}}</option>
        </select>
      </div>
    </div>
    <div class="editInvoiceBtn">
      <button (click)="cancleEditModel()">取消</button>
      <button (click)="saveEditResult()">保存</button>
    </div>
  </div>


  <!-- 设为默认弹框 -->
  <div id="setDefaultMask" class="modalBoxHide">
  </div>
  <div id="setDefault" class="modalBoxHide">
    <div class="modal-body">
      是否确定要改变默认分类设置？
    </div>
    <div class="setDefaultBtn">
      <button type="button" (click)="cancleSetDefault()">取消</button>
      <button type="button" (click)="saveSetDefault()">确定</button>
    </div>
  </div>
  <!-- 批量导入弹框 -->
  <div id="uploadMask1" class="modalBoxHide">
  </div>
  <div id="upload1" class="modalBoxHide">
    <div class="modal-header">
      <h4 class="modal-title pull-left">批量导入开票分类</h4>
      <button type="button" class="close pull-right" (click)="cancelUpload1()" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="form-group form-inline">
      <span class="control-label width-125">上传模板数据：</span>
      <a class="action-btn">浏览
        <input type="file" id="excelUploader" ng2FileSelect class="inputFile" [uploader]="excelUploader">
      </a>
      <button class="action-btn" ng-disabled="btnEnabled" (click)="uploadFile1()">上传</button>
    </div>
    <div class="form-group">
      <button type="submit" class="confirm-btn" (click)="saveAdd1()">确定提交</button>
    </div>
  </div>
</div>